<template>
	<a-layout>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<text slot='content'>人像设置</text>
		</cu-custom>
		<y-form radius="radius" :keys="columns" v-model="info" @submit="submit" submitText="设置">
			<template #photo="{keys:{key}}">
				<view class="image-box">
					<image style="width: 80px;height: 80px;" src='./1.png'></image>
					<image :src="$http.baseURL + info[key]" mode="widthFix" @click="chooseImage(key)"></image>
				</view>
			</template>
		</y-form>
	</a-layout>
</template>

<script>
	import yForm from "@/y-ui/y-form/y-form.vue";
	export default {
		components: {
			yForm
		},
		onLoad(e) {
			this.info = {
				...this.info,
				...e
			}
		},
		data() {
			return {
				defaultImg:require('./1.png'),
				errorImg: undefined,
				info: {}
			}
		},
		computed: {
			columns() {
				return [{
					slot: 'photo',
					key: "photo",
					lable: "",
					block: true,
					rules: {
						rule: ['required'],
						msg: ['请选择照片']
					}
				}];
			}
		},
		methods: {
			chooseImage(key){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:res=>{
						this.$http.up(res.tempFilePaths[0]).then(res=>{
							this.$set(this.info,key,res.path);
						}).finally(this.$loading({msg:'上传中'}));
				    }
				});
			},
			submit(e) {
				if (!e) return;
				//设置人像照片
				this.$http.post('', { ...this.info}).then(res => {
					//上传成功 同步图片到本地
					this.$store.commit('SAVEUSER',{
						photo:res.photo || this.info.photo
					});
					uni.showToast({
						duration: 1500,
						title: "设置成功"
					});
					setTimeout(e => {
						uni.redirectTo({
							url: './personage_center'
						})
					}, 1000);
				}).finally(this.$loading({
					msg: '提交中'
				}));
			}
		}
	};
</script>
<style lang="scss" scoped>
	.image-box{
		position: relative;
		width: 100%;
		flex: 1;
		&::after{
			content: '';
			display: block;
			padding-top: 100%;
		}
		image{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			margin: auto;
		}
	}
</style>